import React from "react";
import {View, Dimensions, Image, StyleSheet, StatusBar} from 'react-native';
import PropTypes from "prop-types";
import ScrollableTabView, {ScrollableTabBar} from "react-native-scrollable-tab-view";
import ListPage from "./ListPage";
import ActiveScrollTab from './ActiveScrollTab';
import {AlbumView, Overlay} from 'teaset';
import FadeImage from './FadeImage';

const WIN_WIDTH = Dimensions.get("window").width;


//基础tabPage
class BaseTabPage extends React.Component {

    static propTypes = {
        titles: PropTypes.array,
        listPageProps: PropTypes.object,
        urlFunc: PropTypes.func,
        paramsFunc: PropTypes.func,
        initialPage: PropTypes.number,
        tabBar: PropTypes.func,
        tabBarStyle: PropTypes.object,
        tabBarUnderlineStyle: PropTypes.object,
        /**
         * 是否将tab的宽度设为width/count
         */
        equalTabWidth: PropTypes.bool,
        /**
         * 当equalTabWidth位false时使用
         */
        tabStyle: PropTypes.object,
        lineWidth: PropTypes.number,
        listPropsAtIndex: PropTypes.func,
        prerenderingSiblingsNumber: PropTypes.number,
        tintColor:PropTypes.string,
        color: PropTypes.string,
        locked: PropTypes.bool,
        onChangeTab: PropTypes.func,
        renderTabBar: PropTypes.func
    };

    static defaultProps = {
        initialPage  : 0,
        equalTabWidth: true,
        tabStyle:null,
        lineWidth: -1,
        prerenderingSiblingsNumber:1,
        tintColor:'#4886FF',
        color: '#666666',
        locked: false,
    };

    goToPage(page){
        const tabView = this.refs['tabView'];
        if (tabView) {
            tabView.goToPage(page);
        }
    }

    componentDidMount() {
        const {navigation} = this.props;
    }

    constructor(props) {
        super(props);
        this.state = {currentTab: 0};
        this.tabArr = this.props.titles.map(value => {
            return {columnName: value}
        });
    }

    refreshAllTabs() {
        this.tabArr.forEach((value, index) => {
            const list = this.refs[`list${index}`];
            list && list.refresh && list.refresh();
        });
    }
    refreshTab(index) {
        const list = this.refs[`list${index}`];
        list && list.refresh && list.refresh();
    }
    refreshCurrentTab() {
        const list = this.refs[`list${this.state.currentTab}`];
        list && list.refresh && list.refresh();
    }


    render() {
        const width = (this.props.tabBarStyle && this.props.tabBarStyle.width) ? this.props.tabBarStyle.width : WIN_WIDTH;
        let tabStyle = {width: width / this.props.titles.length, paddingLeft: 0, paddingRight: 0};
        if (!this.props.equalTabWidth) {
            tabStyle = this.props.tabStyle;
        }
        return (<View
            style={{flex: 1, alignItems: "stretch"}}
        >
            <ScrollableTabView
                ref={'tabView'}
                renderTabBar={this.props.renderTabBar ? this.props.renderTabBar : () => <ActiveScrollTab
                    style={{ width: width, height: 45, backgroundColor:'white', borderBottomColor:'#E5E5E5', borderBottomWidth:1, ...this.props.tabBarStyle}}
                    tabsContainerStyle={{justifyContent: this.props.equalTabWidth ? 'space-around': 'flex-start', width:width < WIN_WIDTH ? width : undefined}}
                    tabStyle={tabStyle}
                    lineWidth={this.props.lineWidth}
                />}
                tabBarUnderlineStyle={{
                    height: 3,
                    backgroundColor: this.props.tintColor,
                    ...this.props.tabBarUnderlineStyle
                }}
                tabBarInactiveTextColor={this.props.color}
                tabBarActiveTextColor={this.props.tintColor}
                tabBarTextStyle={{fontSize: 15}}
                locked={this.props.locked}
                initialPage={this.props.initialPage}
                prerenderingSiblingsNumber={this.props.prerenderingSiblingsNumber}
                contentProps={{bounces:false}}
                onChangeTab={({i}) => this.setState({currentTab: i}, () => this.props.onChangeTab && this.props.onChangeTab(i))}
            >
                {
                    this.tabArr.map((item, index) => {
                        let url_, params_, rest_;
                        if (this.props.listPageProps){
                            let {url, params, ...rest} = this.props.listPageProps;
                            url_ = url;
                            params_ = params;
                            rest_ = rest;
                        }
                        if (this.props.urlFunc){
                            url_ = this.props.urlFunc(index);
                        }
                        if (this.props.paramsFunc){
                            params_ = {...params_, ...this.props.paramsFunc(index)};
                        }

                        if (this.props.listPropsAtIndex) {
                            rest_ = {...rest_, ...this.props.listPropsAtIndex(index)};
                        }
                        return (
                            <ListPage
                                ref={`list${index}`}
                                key={index}
                                tabLabel={item.columnName}
                                index={index}
                                url={url_}
                                params={params_}
                                {...rest_}
                            />
                        );
                    })
                }
            </ScrollableTabView>
        </View>    )
    }
}

const styles = StyleSheet.create({});
export default BaseTabPage;
